import React, { Component } from 'react'
import { NavBar, Icon, InputItem, Button, Toast } from 'antd-mobile';
import './Register.less'
import { Link } from 'react-router-dom'
import { reqRegister } from '../../http/api';
import GoBack from '../../components/GoBack';
export default class Register extends Component {
    constructor() {
        super()
        // 初始化数据
        this.state = {
            user: {
                phone: "",
                nickname: '',
                password: ""
            }
        }
    }
    // 2.绑定数据
    ChangeUser(val, key) {
        console.log(val);
        this.setState({
            user: {
                ...this.state.user,
                [key]: val
            }
        })
    }
    goRegister() {
        // 发请求
        reqRegister(this.state.user).then(res => {
            if (res.data.code === 200) {
                // 弹成功
                Toast.success(res.data.msg, 1);
                // 跳转页面
                this.props.history.push('/login')
            }
        })
    }


    render() {
        let { user } = this.state
        return (
            <div className="register">
                <NavBar
                    mode="dark"
                >注册</NavBar>
                <div className="enter_user">
                    <InputItem
                    
                        onChange={(val) => this.ChangeUser(val, "nickname")}
                        clear
                        placeholder="请输入昵称"
                    >昵称</InputItem>
                    <InputItem
                        clear
                        placeholder="请输入账号"

                        onChange={(val) => this.ChangeUser(val, "phone")}
                    >账号</InputItem>
                    <InputItem

                        onChange={(val) => this.ChangeUser(val, "password")}
                        clear
                        placeholder="请输入密码"
                    >密码</InputItem>

                    <Button onClick={() => this.goRegister()} className="btn_login" type="primary" inline style={{ marginRight: '4px' }}>注册</Button>
                    <div onClick={()=>this.props.history.push('/login')} className="tologin">
                    <span>已有账号，去登录</span>
                    </div>
                </div>
                <div>{JSON.stringify(user)}</div>
                <Link to="/index/home">去首页</Link>

            </div>
        )
    }
}
